<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/operationsummary/Operations' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>患者统计</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <div class="block" size="small">
          <span class="demonstration">挂号时间:</span>
          <el-date-picker
            size="small"
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            align="right"
          >
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <div class="Echarts">
      <div id="patientDiag" style="width: 600px; height: 400px"></div>
    </div>

    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      border
      element-loading-text="拼命加载中"
    >
      <el-table-column
        prop="firstDiag"
        label="初诊"
        width="200"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="secondDiag"
        label="复诊"
        width="200"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="count"
        label="总计"
        width="200"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
export default {
  name: "index",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      formInline: {},
      listData:[
        {
          firstDiag:"",
          secondDiag:"",
          count:"",

        }
      ],
      outpatient:{
        createTimeFront: "",
        createTimeBack: "",
      },
      
    };
  },
  methods: {
    getPatientDiag() {
      let diagTable = echarts.init(document.getElementById("patientDiag"));
      let diagTableOption = {
        series: [
          {
            color:['#409EFF','red','orange'],
            name: "访问来源",
            type: "pie", 
            radius: ["45%","65%"], 
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: this.listData[0].firstDiag, name: "初诊" },
              { value: this.listData[0].secondDiag, name: "复诊" },
            ],
            itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{ 
                        label:{ 
                            show: true, 
                            formatter: '{b} : {c} ({d}%)' 
                        }, 
                        labelLine :{show:true} 
                    } 
                }
          },
        ],
      };
      diagTable.setOption(diagTableOption);
    },
    getpatientdiaginfo() {
        //发送请求,查询年龄段人数 
        axios.post("/api/outpatient/countDiag", this.outpatient)
        .then((res) => {
          // console.log(res);
          this.sexs = res.data.data;
          // console.log('sexs',this.sexs);
          this.listData[0].firstDiag =this.sexs.firstDiag;
          this.listData[0].secondDiag =this.sexs.secondDiag;
          this.listData[0].count =this.sexs.countPatient;
          this.getPatientDiag();
        })
        .catch((err) =>{
            this.$message.error('请求错误,请联系我们的管理员~~~')
        });
      },
      search(){
        if(this.value2!==null&&this.value2!==""){
          this.outpatient.createTimeFront = this.value2[0];
          this.outpatient.createTimeBack = this.value2[1];
        }else{
          this.outpatient.createTimeFront=null;
          this.outpatient.createTimeBack=null;
        }
        //发送请求,查询年龄段人数 
        axios.post("/api/outpatient/countDiag", this.outpatient)
        .then((res) => {
          // console.log(res);
          this.sexs = res.data.data;
          this.listData[0].firstDiag =this.sexs.firstDiag;
          this.listData[0].secondDiag =this.sexs.secondDiag;
          this.listData[0].count =this.sexs.countPatient;
          this.getPatientDiag();
        })
        .catch((err) =>{
            this.$message.error('请求错误,请联系我们的管理员~~~')
        });
      },
  },
  mounted() {
    // this.getPatientDiag();
  },

  created() {
    //显示列表数据
    this.getpatientdiaginfo();
    
  },
};
</script>